<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- React核心库 -->
  <script src="../build/react.min.js"></script>
  <!-- React-DOM提供与DOM相关的功能  -->
  <script src="../build/react-dom.min.js"></script>
  <!-- Browser.js 的作用是将 JSX 语法转为 JavaScript 语法 -->
  <script src="../build/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
  // 组件的生命周期分成三个状态： Mounting：已插入真实 DOM  Updating：正在被重新渲染 Unmounting：已移出真实 DOM
  // React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  var Hello = React.createClass({
    getInitialState: function () {
      return {
        opacity: 1.0
      }
    },
    componentDidMount: function () {
      this.timer = setInterval(function () {
        var opacity = this.state.opacity;
        opacity -= .05;
        if (opacity < 0.1) {
          opacity = 1.0;
        }
        this.setState({
          opacity: opacity
        });
      }.bind(this), 100);
    },
    render: function () {
      return (
        //  React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
        <div style={{opacity: this.state.opacity}}>
          Hello {this.props.name}
        </div>
      )
    }
  });

  ReactDOM.render(<Hello name="World"/>, document.body);
</script>
</body>
</html>